<!--20210304  zaq  创建vue文件-->
<!--20210331  zaq  新增分组/收支信息drawer-->
<!--20210510  zaq  修改账簿显示类型-->
<!--20210511  zaq  修改导入路径，新增占位图片-->
<!--20210512  zaq  设计账簿-组别-收支类型账簿显示-->

<template>
  <!--账簿-->
  <div style="text-align: left;width: 85%">




        <!--    新建账簿-->
        <el-dialog
            title="新增账簿"
            v-model="createBookVisible"
            width="30%"
            :before-close="handleClose">
          <insert-book></insert-book>
        </el-dialog>

        <el-button style="width: 100%;height: 100%" @click="createBook">
          <i class="el-icon-plus" style="size: 2em"/> <br>新建</el-button>
    <br>


    <div>
      <el-col
          v-for="book in books"
          style="width: 15em;text-align: center;border: 1em;padding: 1em"
      >
        <el-card :body-style="{ padding: '0px' }">
          <template #header>
            <div class="card-header">
                  <span>{{ book.bName }}      </span>
              <!--              删除账簿-->
              <el-button type="text" class="button" @click="deleteBook(book)">
                    <i class="el-icon-delete"></i>删除
                  </el-button>


            </div>
          </template>
          <!--          账簿图片-->
          <el-empty :image-size="120"></el-empty>
          <!--          <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">-->
          <div style="padding: 14px;">
            <div class="bottom">
              <!--              <time class="time">{{ currentDate }}</time>-->

              <!--              账簿信息修改-->
              <el-dialog
                  title="账簿信息"
                  v-model="book.bookUpdate"
                  width="30%"
                  :before-close="handleClose">
                <update-book v-bind:form="book"></update-book>
                <template #footer>
                  <span class="dialog-footer">
                    <el-button @click="book.bookUpdate = false">取 消</el-button>
                    <el-button type="primary" @click="bookUpdate(book)">确 定</el-button>
                  </span>
                </template>
              </el-dialog>

              <el-button type="text" class="button" @click="book.bookUpdate=true">
                <i class="el-icon-edit"></i>信息</el-button>


              <!--              新增收支记录-->
<!--              <el-button type="text" class="button"><i class="el-icon-plus"></i>新增</el-button>-->


              <!--              查看明细-->
              <el-button type="text" class="button"
                         @click="selectList(book)"  style="margin-left: 16px;">
                <i class="el-icon-search"></i>查看明细</el-button>

              <el-drawer
                  title="查询"
                  v-model="book.selectDrawer"
                  :direction="direction"
                  :before-close="handleClose" destroy-on-close
                  size="50%"
              >
                <!--                账簿类型包含组别，显示组别-->
                <group v-if="book.flagGroup==1"
                       style="width: 100%"
                ></group>
                <!--                账簿类型不包含组别，直接显示明细-->
                <list v-else style="width: 100%">

                </list>
              </el-drawer>

            </div>
          </div>
        </el-card>

        <!--        <el-card-->
        <!--            class="box-card"-->
        <!--            style="width: 150px">-->
        <!--          <div slot="header" class="clearfix">-->
        <!--            &lt;!&ndash;            <span>{{ '种类：'+book.kind }}</span>&ndash;&gt;-->
        <!--            <span>???????</span>-->
        <!--            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
        <!--          </div>-->
        <!--          <div >-->
        <!--          </div>-->

        <!--          <span>???????</span>-->
        <!--        </el-card>-->
      </el-col>
    </div>



<!--      <el-col span="5">-->
<!--        &lt;!&ndash;        新增账簿&ndash;&gt;-->
<!--        <el-card :body-style="{ padding: '0px' }">-->
<!--          &lt;!&ndash;          账簿图片&ndash;&gt;-->
<!--          <el-empty :image-size="200"></el-empty>-->
<!--          &lt;!&ndash;          <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">&ndash;&gt;-->
<!--          <div style="padding: 14px;">-->
<!--            <span>新增账簿</span>-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-col>-->



    <!--    成功信息对话框-->
    <el-dialog
        title="提示"
        v-model="successDialog.visible"
        width="30%"
        :before-close="handleClose">

      <el-result icon="success" title="账簿修改成功" :subTitle="successDialog.message"/>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="successDialog.visible=false">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!--    失败信息对话框-->
    <el-dialog
        title="提示"
        v-model="failDialog.visible"
        width="30%"
        :before-close="handleClose">

      <el-result icon="error" title="账簿修改失败" :subTitle="failDialog.message"/>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="failDialog.visible = false">取 消</el-button>
          <el-button type="primary" @click="failDialog.visible = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import Update_book from "./Update_book";
import List from "./List";
import Group from "./Group";
import Insert_book from "./Insert_book";
import {getBook_0000, updatePwd_11302} from "../../api";
import {ElMessage} from "element-plus";
import {update_12201} from "../../api";
import {delete_12301} from "../../api";

export default {
  name: "Books",
  components:{
    'update-book':Update_book,
    'list':List,
    'group':Group,
    'insert-book':Insert_book,
  },
  data(){
    return {
      // 成功信息
      successDialog:{
        visible:false,
        message:'',
      },
      // 失败信息
      failDialog:{
        visible:false,
        message:'',
      },
      book_update:false,//账簿信息修改弹框
      select_drawer: false,//查询收支信息drawer
      direction: 'rtl',
      books:[
        {
          bId:-1,//账簿ID
          bName:"",//账簿名称
          bCreatedate:0,//创建时间
          bDefault:0,//默认账簿
          delete:0,
          uId:-1,
          bKind:-1,//账簿类型
          flagGroup:false,//有无组别
          bookUpdate:false,//账簿信息修改弹框
          selectDrawer: false,//查询收支信息drawer
        }
      ],
      createBookVisible:false,//新增账簿弹框
      currentDate: '2021-5-10'
    }
  },
  methods:{
    //查看明细
    selectList(book){
      book.selectDrawer = true
      sessionStorage.setItem("bId",book.bId)
      sessionStorage.setItem("kBId",book.bKind)
      if(book.flagGroup==false){
        //无组别，跳转时组别置为-1
        sessionStorage.setItem("gId","-1")
      }
    },
    //删除信息
    deleteBook(book){
      const _this=this
      this.$confirm('此操作将永久删除该账簿, 是否继续?', '删除账簿', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //调用接口
        delete_12301(book).then(resp=>{
          if(resp.code>0){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            _this.selectBook()
          }else {
            this.$message({
              type: 'error',
              message: '删除失败:'+resp.note
            });
          }
        }).catch(error=>{
          this.$message({
            type: 'error',
            message: '调用接口失败:'+error
          });
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    createBook(){
      this.createBookVisible=true
      console.log("弹出新增界面")

      console.log(this.createBookVisible)
    },
    bookUpdate(book){
      const _this=this
      console.log("bookName:"+book.bName)

      console.log("id:"+book.bId)
      book.bookUpdate = false

      //账簿名不能为空
      if(book.bName==null||book.bName==""||book.bName==" "){
        //弹出失败信息
        _this.failDialog.message="账簿名不能为空";
        _this.failDialog.visible=true;
      }else{
        //调用接口
        update_12201(book).then(resp=>{
          if(resp.code>0){
            //弹出成功提示
            _this.successDialog.message=resp.note;
            _this.successDialog.visible=true;
            console.log("成功")
          }else{
            //弹出失败信息
            _this.failDialog.message=resp.note;
            _this.failDialog.visible=true;
          }
        }).catch(error => {
          console.log('调用接口12201失败：' + error);
        });
      }



    },
    selectBook(){
      const _this=this
      //查询账簿
      let isLogin=this.$store.getters.isLogin
      let uId=sessionStorage.getItem("uId")

      console.log("isLogin:"+isLogin)
      console.log("uId:"+uId)
      if(isLogin){
        var book={
          bId:-1,//账簿ID
          bName:"",//账簿名称
          bCreatedate:0,//创建时间
          bDefault:0,//默认账簿
          delete:0,
          uId:uId,
          bKind:-1,//账簿类型
          flagGroup:false,//有无组别
          bookUpdate:false,//账簿信息修改弹框
          selectDrawer: false,//查询收支信息drawer
        }
        getBook_0000(book).then(resp=>{
          // if(resp[0].code>0){
          for (let i = 0; i < resp.length; i++) {
            console.log(i)
          }
            _this.books=resp
            console.log(resp)
          // }else {
          //   console.log('调用账簿信息获取失败：' + resp[0].note);
          // }
        }).catch(error => {
          console.log('调用接口获取用户信息失败：' + error);
        });
      }else {
        ElMessage.error('用户未登录,请注销重试');
      }
    },
    setBook_update(data){
      this.book_update=data;

    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            sessionStorage.setItem("bId",null)
            done();
          })
          .catch(_ => {});
    }
  },
  created() {
    this.selectBook()
  }
}
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
.myBook{
  padding-right: 2px;
  padding-bottom: 2px;
  margin: 0;
  height: 3em;
  border:1px;
  background-color: #8c939d;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
</style>